<template>
    <el-dialog
    top="3vh"
    v-model="dialogVisible"
    :title="props.fileUrl"
    width="900"
    :before-close="handleClose"
  >
  <template #header>
  <div class="header">
    头部
  </div>
     
  </template>
  <div class="pdfbody">
        <!-- 基本预览 -->
        <vue-pdf-embed :source="pdfUrl" />

        <!-- 带分页控制 -->
        <div>
            <button @click="currentPage = Math.max(1, currentPage - 1)">上一页</button>
            <span>Page {{ currentPage }} of {{ pageCount }}</span>
            <button @click="currentPage = Math.min(pageCount, currentPage + 1)">下一页</button>
        </div>

        <vue-pdf-embed :source="pdfUrl" :page="currentPage" @rendered="handlePdfRender" />
  </div>
    
   </el-dialog>
</template>

<script setup lang="ts">
import { ref,defineEmits } from 'vue';
import VuePdfEmbed from 'vue-pdf-embed';

const props= defineProps(['fileUrl'])

const pdfUrl = ref(import.meta.env.VITE_IMG_BASE_URL+props.fileUrl);
const currentPage = ref(1);
const pageCount = ref(0);
const dialogVisible = ref(true)

const emits=defineEmits(["close"]);


const handlePdfRender = (pdfDocument:any) => {
    pageCount.value = pdfDocument.numPages;
};

const handleClose = (done: () => void) => {

    emits("close");

}
</script>

<style>
/* 设置容器高度 */
.vue-pdf-embed {
    height: 80vh;
    border: 1px solid #eee;
}
.pdfbody{
      height:calc(97vh - 125px);
      overflow-y: auto;
}
.header{
    width: 100%;
 
}
</style>